<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>
  <script src="../lib/echarts.js"></script>

  <style>
    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }




    .right-top {
      width: 100%;
    }

    .headtitle{
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        text-indent: 20px;
        font-size: 16px;
        letter-spacing: 3px;
        font-weight: 500;
        border-left: 5px solid #009688;
    }
  </style>
</head>

<body>
  <div class="headTitle">
    整体监测
  </div>
  <div class="sideListout">
    <div class="leftBox">
      <div id="test1"></div>
      <div class="hidden">
        <div class="sanjiao" state="false"></div>
      </div>
    </div>
    <div class="rightBox">
      <div class="right-top" id="chartmain">
        <div class="layui-tab layui-tab-card">
          <ul class="layui-tab-title">
            <li class="layui-this">叶龄</li>
            <li>空气/土壤温度</li>
            <li>空气/土壤湿度</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间起始</label>
                      <div class="layui-input-inline box">
                        <input name="time" type="text" class="layui-input" id="test3" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间截止</label>
                      <div class="layui-input-inline box">
                        <input name="time1" type="text" class="layui-input" id="test2" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div class='tableHeader'>叶龄</div>
              <div class="charts" style="width:100%;">
                <div id="chartmain2" style="height: 342px;width: 100%;"></div>
              </div>
              <div  class="tableHeader">列表</div>
              <div id="demoTable1" style="width: 100%;" lay-filter="test"></div>
            </div>
            <div class="layui-tab-item">
            <form action="" class="layui-form">
              <div class="layui-row">
                <div class="layui-col-md5">
                  <div class="layui-form-item">
                    <label class="layui-form-label">时间起始</label>
                    <div class="layui-input-inline box">
                      <input name="time" type="text" class="layui-input" id="test4" required="true"
                             lay-verify="required">
                    </div>
                  </div>
                </div>
                <div class="layui-col-md5">
                  <div class="layui-form-item">
                    <label class="layui-form-label">时间截止</label>
                    <div class="layui-input-inline box">
                      <input name="time1" type="text" class="layui-input" id="test5" required="true"
                             lay-verify="required">
                    </div>
                  </div>
                </div>
                <div class="layui-col-md2" style="text-align: center;">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                </div>
              </div>
            </form>
            <div class='tableHeader'>空气/土壤温度</div>
            <div class="charts" style="width:100%;">
              <div id="chartmain3" style="height: 342px;width: 100%;"></div>
            </div>
            <div  class="tableHeader">列表</div>
            <div id="demoTable2" style="width: 100%;" lay-filter="test"></div>
          </div>
            <div class="layui-tab-item">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间起始</label>
                      <div class="layui-input-inline box">
                        <input name="time" type="text" class="layui-input"  required="true"
                               lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间截止</label>
                      <div class="layui-input-inline box">
                        <input name="time1" type="text" class="layui-input"  required="true"
                               lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div class='tableHeader'>空气/土壤温湿度</div>
              <div class="charts" style="width:100%;">
                <div id="chartmain4" style="height: 342px;width: 100%;"></div>
              </div>
              <div  class="tableHeader">列表</div>
              <div id="demoTable3" style="width: 100%;" lay-filter="test"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../lib/echarts.js"></script>
<script>
  $('#chartmain3').width($('.charts').width());
  $('#chartmain4').width($('.charts').width());

  layui.use(['table', 'jquery', 'form'], function () {
      var table = layui.table;
      var $ = jQuery = layui.$;
      var form = layui.form;
      //监听提交
      form.on('submit(formDemo)', function (data) {
          console.log(data)
          alert(JSON.stringify(data.field));
          return false;
      });
      //第一个实例
      table.render({
          elem: '#demoTable1',
          //					height: 315
          //  ,url: '/demo/table/user/' //数据接口
          //						,
          page: true //开启分页
          ,
          cols: [
              [ //表头
                  {
                      field: 'dkmc',
                      title: '序号',
                      align: 'center',
                      width: '10%'
                  }, {
                  field: 'cjsj',
                  title: '地块名称',
                  align: 'center',
                  width: '20%',
              }, {
                  field: 'sbid',
                  title: '叶龄',
                  align: 'center',
                  width: '15%'
              }, {
                  field: 'sblx',
                  title: '叶长',
                  align: 'center',
                  width: '15%'
              }, {
                  field: 'gz',
                  title: '分蘖数',
                  width: '10%',
                  align: 'center',
              }, {
                  field: 'kqsd',
                  title: '有效光合面积',
                  width: '10%',
                  align: 'center',
              }, {
                  field: 'trsf',
                  title: '叶色(饱和度)',
                  width: '10%',
                  align: 'center',
              }, {
                  field: 'trsf',
                  title: '叶色(色度)',
                  width: '10%',
                  align: 'center',
              }
              ]
          ],
          data: [
              { // 表格数据
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }]
      });
      table.render({
          elem: '#demoTable2',
          //					height: 315
          //  ,url: '/demo/table/user/' //数据接口
          //						,
          page: true //开启分页
          ,
          cols: [
              [ //表头
                  {
                      field: 'dkmc',
                      title: '序号',
                      align: 'center',
                      width: '25%'
                  }, {
                  field: 'cjsj',
                  title: '所属地块',
                  align: 'center',
                  width: '25%'
              },
                  {
                      field: 'gz',
                      title: '空气温度',
                      align: 'center',
                      width: '25%'
                  },{
                  field: 'sbid',
                  title: '土壤温度',
                  align: 'center',
                  width: '25%'
              }
              ]
          ],
          data: [{ // 表格数据
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }]
      });
      table.render({
          elem: '#demoTable3',
          //					height: 315
          //  ,url: '/demo/table/user/' //数据接口
          //						,
          page: true //开启分页
          ,
          cols: [
              [ //表头
                  {
                      field: 'dkmc',
                      title: '序号',
                      align: 'center',
                      width: '25%'
                  }, {
                  field: 'cjsj',
                  title: '所属地块',
                  align: 'center',
                  width: '25%'
              },
                  {
                      field: 'gz',
                      title: '空气湿度',
                      align: 'center',
                      width: '25%'
                  },{
                  field: 'sbid',
                  title: '土壤湿度',
                  align: 'center',
                  width: '25%'
              }
              ]
          ],
          data: [{ // 表格数据
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }, {
              "id": "<div><input type='checkbox'></div>",
              "dkmc": "地块",
              "cjsj": "男",
              "sbid": "浙江杭州",
              "sblx": "人生恰似一场修行",
              "gz": "116",
              "kqsd": "116",
              "trsf": "地块",
              "trwd": "男",
              "dcdl": "浙江杭州",
              "dy": "人生恰似一场修行",
              "yl": "116",
          }]
      });
  });

  layui.use(['tree', 'util', 'form'], function () {
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function (data) { //提交事件回调
      console.log(data)
      alert(JSON.stringify(data.field));
      return false;
    });
    var tree = layui.tree,
      layer = layui.layer,
      util = layui.util,
      nodes = [{ //树分支数据
        title: '江西',
        id: 1,
        children: [{
          title: '南昌',
          id: 1000,
          children: [{
            title: '青山湖区',
            id: 10001
          }, {
            title: '高新区',
            id: 10002
          }]
        }, {
          title: '九江',
          id: 1001
        }, {
          title: '赣州',
          id: 1002
        }]
      }, {
        title: '广西',
        id: 2,
        children: [{
          title: '南宁',
          id: 2000
        }, {
          title: '桂林',
          id: 2001
        }]
      }, {
        title: '陕西',
        id: 3,
        children: [{
          title: '西安',
          id: 3000
        }, {
          title: '延安',
          id: 3001
        }]
      }]
    tree.render({
      elem: '#test1',
      data: nodes,
      showCheckbox: true,
      oncheck: function (obj) { //勾选时触发获取勾选数据
        alert(obj)
      },
      showLine: false //是否开启连接线
    });

  });
  layui.use('element', function () {
    var element = layui.element;

    //…
  });
  layui.use('laydate', function () {
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
      elem: '#test3' //指定元素
    });
    laydate.render({
      elem: '#test2' //指定元素
    });
    laydate.render({
      elem: '#test4' //指定元素
    });
    laydate.render({
      elem: '#test5' //指定元素
    });
    laydate.render({
      elem: '#test6' //指定元素
    });
    laydate.render({
      elem: '#test7' //指定元素
    });
  });
  //echarts
  var option  = {
      title: {
          text: "叶龄",
          x: "center",
          textStyle: {
              fontSize: 14
          },
          top: 0
      },
      toolbox: {
          show: !0,
          right: 10,
          feature: {
              saveAsImage: {
                  type: "png",
                  pixelRatio: 2
              }
          }
      },
      grid: {
         /* top: 60,
          left: 10,
          right: 10,
          height: 200,
          containLabel: !0*/
      },
      xAxis: {
          type: "category",
          boundaryGap: false,
          data: ['地块1','地块2','地块3','地块4','地块5','地块6','地块7','地块8','地块9','地块10','地块11','地块12',]},
      yAxis: {
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      },
      visualMap:{
          show: !1,
          pieces: [{
              gt: 0,
              lte: 50,
              color: "#2f4554"
          }, {
              gt: 50,
              lte: 100,
              color: "#c23531"
          }]
      }
      ,
      series: [{
          data:[50,52,63,43,75,12,57,89,79,67,45,94,23,76,89,120,125,156,34] ,
          showSymbol: !1,
          name: "叶龄",
          type: "line",
          smooth: true
      }
      ],
      tooltip: {
          trigger: "axis",
          formatter: function(e) {
              return e[0].name + "<br>多空比:" + e[0].value.toFixed(1)
          }
      }
  };
  var myChart = echarts.init(document.getElementById('chartmain2'));
  var option2 =  {
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      legend: {
          data: ['空气温度', '土壤温度'],
          x: 'right'
      },
      toolbox: {
          show: false,
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6', '地块7']
      }],
      yAxis: [{
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      }],
      series: [
          {
              name: '空气温度',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [120, 132, 101, 134, 90, 230, 210,]
          },
          {
              name: '土壤温度',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [220, 182, 191, 234, 290, 330, 310]
          }
      ]
  };
  var myChart2 = echarts.init(document.getElementById('chartmain3'));
  var option3 =  {
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      legend: {
          data: ['空气温度', '土壤温度'],
          x: 'right'
      },
      toolbox: {
          show: false,
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6', '地块7']
      }],
      yAxis: [{
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      }],
      series: [
          {
              name: '空气温度',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [120, 132, 101, 134, 90, 230, 210,]
          },
          {
              name: '土壤温度',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [220, 182, 191, 234, 290, 330, 310]
          }
      ]
  };
  var myChart3 = echarts.init(document.getElementById('chartmain4'));
  myChart.setOption(option);
  myChart2.setOption(option2);
  myChart3.setOption(option3);
  // 使用刚指定的配置项和数据显示图表。

</script>
<script src="../js/index.js"></script>